<template>
  <div class="productsDetail" curpagename="productsDetail1123234343423423" v-loading="detailLoading">
    <div class="title_tip">
      <span class="fail_info" @click="getErrData" v-if="isEditPicture&&lookErr"
        ><el-icon><Warning /></el-icon>查看上传失败图片</span
      >

      <!-- <span class="tip_info" @click="oprationFun"
        ><el-icon><QuestionFilled /></el-icon>操作指南</span
      > -->

      <div class="btnBox">
        <el-button v-if="!isEditPicture" v-auth="{'authArr':authArr,'key':'edit'}" type="primary" link @click="editOpen"  style="margin-right:-25px;">
          <el-icon><Edit /></el-icon>{{$t('merak.edit')}}
        </el-button>
        <el-button style="margin-left: 20px" type="default" v-if="isEditPicture" @click="cancelEdit">   {{$t('merak.back')}} </el-button>
      </div>
    </div>
    <!-- 查看 -->
    <div style="margin-top: 20px;margin-right:-10px;" v-if="!isEditPicture">
      <productLook v-model="dfaultFileArr"></productLook>
    </div>
    <div class="upload_moudle" v-if="isEditPicture">
      <!-- 上传列表 -->
      <productFileList
        ref="productFileRef"
        :refname="productFileRef"
        v-bind="uploadDataOne"
        v-model="dfaultFileArr"
        @delLine="delLineFun"
        @dragChange="dragChange"
        @errFile="errFile"
      ></productFileList>
    </div>

    <Transition name="fade" mode="out-in">
      <errorFileList v-if="errInfoBool" :errDataArr="errDataArr" @close="handleClose" />
    </Transition>
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref, onMounted, nextTick } from "vue";
import productLook from "@/views/goodsArchive/a-components/pictureLook/look.vue";
import productFileList from "@/views/goodsArchive/a-components/productDetailFile/index.vue";
import errorFileList from "@/views/goodsArchive/a-components/errorDetailFle/index.vue";

import { Path, getListDetailApi, delGoodsImagesApi, changesImagesApi } from "@/api/modules/goodsArchive/list/detail";

import { successMsg, failMsg, confirmWarningMsg, warnMsg } from "@/utils/messageUtils";
import { ResultEnum } from "@/enums/httpEnum";
import { tryOnBeforeMount } from "@vueuse/core";

let dfaultFileArr = ref([]); //初始化默认数据
const productFileRef = ref(null); //组件ref

const props = withDefaults(
  defineProps<{
    goodsId: string;
    authArr:object;
  }>(),
  {}
);

const detailLoading = ref(false);
const isEditPicture = ref(false);
const draggingBool = ref(false);
const uploadDataOne = reactive({
  accept: ".jpg,.jpeg,.png,.gif,.bmp,.webp", //只允许图片上传
  tipMsg: ",支持jpg、png、webp格式",
  path: Path.goodsImgDetail,
  params: { goods_id: props.goodsId },
  isEdit: isEditPicture, //是否编辑
  occupyHei: 40, //父页面占用高度
  draggingBool: draggingBool //烤漆拖拽
});

//删除一行
const delLineFun = params => {
  confirmWarningMsg({
    msg: "是否确认删除?",
    callback: val => {
      console.log(val, "成功confirm还是失败cancel");
      if (val == "confirm") {
        let rows = params.rows;

        delGoodsImagesApi({ id: rows.id, source: "detail" }).then(res => {
          console.log(res);
          if (res.code == ResultEnum.SUCCESS) {
            let indexFilter = dfaultFileArr.value.findIndex(fitem => fitem.id == rows.id);
            if (indexFilter > -1) {
              dfaultFileArr.value.splice(indexFilter, 1);
            }
            productFileRef.value.delChangeFile(rows); //清空上次选择
            successMsg("删除成功");
          } else {
            failMsg(res.message);
          }
        });
      }
    }
  });
};

//错误数据
const errInfoBool = ref(false);
const errDataArr = ref([]);
const getErrData = () => {
  let errData = productFileRef.value.getErrUploadData();

  if (errData && errData.length > 0) {
    errDataArr.value = errData;
    errInfoBool.value = true;
    return;
  }
  warnMsg("未有上传失败的图片");
};

const handleClose = () => {
  {
    errInfoBool.value = false;
  }
};

//拖拽
const dragChange = params => {
  console.log(params, "腹肌拖拽数据");
  let moveObj = params.moveObj.moved;
  let dataObj = {
    goods_id: props.goodsId,
    source: "detail",
    id: moveObj.element?.id,
    sort: moveObj.newIndex + 1
  };

  changesImagesApi(dataObj).then(res => {
    let { code, data, message } = res;
    if (code == ResultEnum.SUCCESS) {
       productFileRef.value?.resetArr();
      // initDeatilImages();
      nextTick(() => {
        // console.log(productFileRef.value);
        // productFileRef.value?.dragScroll(100 * moveObj.newIndex);
      });
    }
  });
};

// source ： spu 或 detail  区分来源页面：商品图，detail详情图
// id: 图片id
// sort: 1 序号
// is_default: 1 或 0  此参数 source=spu时才会有。详情图没有默认设置。1默认，0非默认

//初始化商品详情图片列表
const initDeatilImages = () => {
  detailLoading.value = true;
  getListDetailApi({ goods_id: props.goodsId }).then(res => {
    let { code, data, message } = res;
    let list = data.table_data?.list;
    console.log(list);
    dfaultFileArr.value = list;
    detailLoading.value = false;
  });
};

//开启编辑
const editOpen = () => {
  isEditPicture.value = true;
  draggingBool.value = true;
};
//取消编辑
const cancelEdit = () => {
  isEditPicture.value = false;
  draggingBool.value = false;
  initDeatilImages();
};

const lookErr=ref(false);
const errFile=()=>{ 
   let errData = productFileRef.value.getErrUploadData(); 
     if(errData.length ) lookErr.value=true;
}
onMounted(() => {
  initDeatilImages();
});
</script>
<style lang="scss" scoped>
@import url("./index.scss");
</style>
